<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <div v-if="isRender">
      <a href="javascript:void(0)" @click="isRender = false">设计</a>
      <iview-uieditor-render :options="options" :json="json" />
    </div>
    <div v-else class="uieditor-div">
      <iview-uieditor :options="options" :json="json" :theme="theme" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.uieditor-div {
  position: absolute;
  top: 0;
  bottom: 2px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
<script lang="ts">
import { post } from "jquery";
import {
  UEHelper,
  UEOption,
  UERender,
  UERenderItem,
  UETheme,
  UEVue,
  UEVueComponent,
  UEVueData,
  UEVueLife,
} from "vue-uieditor";

import { DemoJson } from "./demo";

const groupOrder = 10;
const group = "测试组件库/基础组件";

@UEVueComponent({})
export default class Home extends UEVue {
  options: UEOption = UERender.DefineOption({
    http() {
      return {
        async get(url, config) {
          return { url, name: "name-" + UEHelper.makeAutoId(), config };
        },
        async post(url, config) {
          return { url, name: "name-" + UEHelper.makeAutoId(), config };
        },
      };
    },
    transfer: {
      "test-text": {
        transfer(render, extend) {
          const { getPropText } = extend;
          render.type = "span";
          const text = getPropText("text", "Text", true);
          render.children = [text];
          return render;
        },
        editor: {
          text: "测试 Text 文本",
          order: 0,
          groupOrder,
          group,
          inline: true,
          icon: "layui-icon layui-icon-align-left",
          contextmenu({ render, service }) {
            return [
              {
                title: "测试 Editor",
                click() {
                  // LayuiHelper.msg(
                  //   JSON.stringify(service.getJson(false, render) || {})
                  // );
                },
              },
            ];
          },
          toolbar({ render, service }) {
            return [
              {
                title: "添加",
                icon: "layui-icon layui-icon-addition",
                click() {
                  service.addByComponent(
                    {
                      $isTmpl: true,
                      item: {
                        json: '{"type":"uieditor-text","props":{"text":"test1222"}}',
                      },
                    },
                    render.editorId,
                    "after"
                  );
                },
              },
            ];
          },
          attrs: {
            text: {
              effect: true,
              enabledBind: true,
              row: true,
              value: "测试文本",
              type: "select",
              datas: ["sm", "lg", "dd"],
              desc: "TEST DESC",
              order: 0,
            },
            slider: {
              effect: false,
              row: false,
              value: "0",
              type: "slider",
              typeOption: { min: 1, max: 24, step: 1 },
              order: 1,
            },
            select: {
              effect: false,
              row: false,
              value: "sm",
              type: "select-only",
              datas: ["sm", "lg", "dd"],
              order: 2,
            },
            boolean: {
              effect: false,
              row: false,
              value: "true",
              type: "boolean",
              order: 2,
            },
            click: { event: true, order: 30 },
          },
        },
      },
    },
    templates: [
      {
        title: "JSON",
        group: "测试模板库/测试模板",
        json: '{"type":"uieditor-div","children":[{"type":"uieditor-text","props":{"text":"test1","name":"name1"}},{"type":"uieditor-div","children":[{"type":"uieditor-text","props":{"text":"test1222"}},{"type":"test-text","props":{"text":"测试文本","slider":"0","select":"sm",":boolean":"true"}}]}]}',
      },
      {
        title: "JSON Object",
        group: "测试模板库/测试模板",
        json: {
          type: "uieditor-div",
          children: [
            { type: "uieditor-text", props: { text: "test1", name: "name1" } },
            {
              type: "uieditor-div",
              children: [
                { type: "uieditor-text", props: { text: "test1222" } },
                {
                  type: "test-text",
                  props: {
                    text: "测试文本",
                    slider: "0",
                    select: "sm",
                    ":boolean": "true",
                  },
                },
              ],
            },
          ],
        },
      },
      {
        title: "Tmpl",
        group: "测试模板库/测试模板",
        template: `<template>
	<uieditor-div>
		<uieditor-text text="test1" name="name1" />
		<uieditor-div>
			<uieditor-text text="test1222" />
			<test-text text="测试文本" slider="0" select="sm" :boolean="true" />
		</uieditor-div>
	</uieditor-div>
</template>`,
      },
    ],
    transferBefore(render) {
      return render;
    },
    transferAfter(render) {
      return render;
    },
  });

  json: UERenderItem = DemoJson;

  isRender = false;

  theme: UETheme;
  @UEVueData()
  private initData() {
    return {
      theme: {
        modes: ["json", "script", "tmpl"],
        toolBar: [
          {
            title: "应用",
            click: ({ service }) => {
              this.json = service.getJson();
              this.isRender = true;
            },
          },
          {
            title: "测试",
            icon: "layui-icon layui-icon-heart",
            disabled: ({ service }) => !service.getCurRender(),
            click: ({ service }) => {
              const render = service.getCurRender();
              // LayuiHelper.msg(
              //   JSON.stringify(service.getJson(false, render) || {})
              // );
            },
          },
        ],
        contextmenus({ render, service }) {
          return [
            {
              title: "测 试",
              disabled: !render,
              click: (item) => {
                // LayuiHelper.msg(
                //   JSON.stringify(service.getJson(false, render) || {})
                // );
              },
            },
          ];
        },
      } as UETheme,
    };
  }

  @UEVueLife("mounted")
  private _mounted1() {
    // setTimeout(() => {
    //   this.json = {
    //     type: "uieditor-div",
    //     children: [
    //       {
    //         type: "uieditor-text",
    //         props: {
    //           text: "test1-" + new Date().valueOf(),
    //         },
    //       },
    //     ],
    //   };
    // }, 3000);
  }
}
</script>
